<template>
  <div class="h-full bg-grey">
    <!-- 头部搜索 -->
    <div class="h-55 p-10 flex a-center sticky top-0 z-index-10 bg-white">
      <van-icon @click="$router.go(-1)" class="text-red" name="arrow-left" />
      <router-link tag="div" to="/order/search" class="flex-1 m-l-10">
        <VSearch class="bg-grey" :content="searchValue || '搜索订单'"></VSearch>
      </router-link>
    </div>
    <div>
      <div class="p-h-10 bg-grey">
        <van-skeleton avatar :row="4" avatar-size="80" avatar-shape="square" :loading="!ready">
          <van-list
            v-model="listControl.loading"
            :finished="listControl.pages === 0 || listPage.current === listControl.pages"
            finished-text="没有更多了"
            @load="getMoreData()"
            :immediate-check="false"
          >
            <order-list :list="list"></order-list>
          </van-list>
        </van-skeleton>
      </div>
      <div v-if="!list.length && ready" class="p-h-10 bg-grey">
        <empty-data class="text-center m-t-20" content="没有搜索到附近的商家"></empty-data>
      </div>
    </div>
  </div>
</template>

<script>
import logo from '@/assets/images/merchant.jpg'
import VSearch from '@/components/VSearch'
import OrderList from '@/views/Order/components/OrderList'
export default {
  data () {
    return {
      ready: false,
      searchValue: '',
      list: [],
      listPage: {
        size: 10,
        current: 1
      },
      listControl: {
        pages: null,
        loading: false
      },
      logo
    }
  },
  components: {
    VSearch,
    OrderList
  },
  mounted () {
    this.init()
  },
  methods: {
    async init () {
      this.getVal()
      await this.getOrderList()
      this.ready = true
    },
    getMoreData () {
      // 分页查询附近商家
      this.listPage.current++
      this.getOrderList()
    },
    async getOrderList () {
      this.listControl.loading = true
      let { page } = await this.$api.post('/xf/business/query', {
        size: 10,
        current: this.listPage.current,
        ddh: this.searchValue,
        status: [1]
      })
      this.listPage.current = page.current
      this.listControl.pages = page.pages
      this.listControl.loading = false
      this.list = [...this.list, ...page.records]
    },
    getVal () {
      let { val } = this.$route.query
      this.searchValue = val
    }
  }
}
</script>
